<!-- 消息列表组件 -->
<template>
  <div class="content" id="message-container" @click="handleClick">
    <ul class="message-list">
      <li 
        v-for="(item, index) in messageList" 
        :key="index" 
        :class="getItemClass(item.id)"
      >
        <!-- 用户消息 -->
        <div v-if="item.id === 2" class="message-content">
          <!-- 文本消息 -->
          <div v-if="item.cont" class="message-bubble">
            <span>{{ item.cont }}</span>
          </div>
          
          <!-- 图片消息 -->
          <div v-if="item.img" class="message-image" @click="handleImageClick(item)">
            <img :src="item.img" alt="用户图片" />
          </div>
        </div>
        
        <!-- 用户头像 -->
        <span v-if="item.id === 1 || item.id === 2" class="message-avatar">
          <img src="../u171.png" alt="用户头像" />
        </span>
        
        <!-- AI消息 -->
        <div v-if="item.id === 1" class="message-content-user">
          <!-- 文本消息 -->
          <div v-if="item.cont" class="message-bubble-user">
            <span>{{ item.cont }}</span>
            
            <!-- 按钮组 - 单个是否按钮 -->
            <div v-if="item.type === 'buttom'" class="button-group">
              <button
                class="action-button"
                @click="handleButtonClick(item.cont)"
              >是</button>
              <button class="action-button">否</button>
            </div>
            
            <!-- 按钮组 - 单个按钮 -->
            <div v-if="item.type === 'buttom1'" class="button-group">
              <button
                class="action-button large"
                @click="handleButtonClick(item.cont)"
              >{{ item.btn }}</button>
            </div>
            
            <!-- 按钮组 - 三个按钮 -->
            <div v-if="item.type === 'buttom3'" class="button-group">
              <button class="action-button">{{ item.btn1 }}</button>
              <button class="action-button">{{ item.btn2 }}</button>
              <button
                class="action-button"
                @click="handleButtonClick(item.cont)"
              >{{ item.btn3 }}</button>
            </div>
            
            <!-- 视频区域 -->
            <div v-if="item.type === 'mp4'" class="video-container">
              <span>MP4视频</span>
            </div>
            
            <!-- 链接卡片 -->
            <div v-if="item.type === 'link'" class="link-container">
              <div class="link-card">
                <h4>{{ item.name }}</h4>
                <p>{{ item.des }}</p>
              </div>
            </div>
          </div>
          
          <!-- 图片消息 -->
          <div v-if="item.img" class="message-image-user" @click="handleImageClick(item)">
            <img :src="item.img" alt="AI图片" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, nextTick, watch } from 'vue';
import { showImagePreview } from '@nutui/nutui';
import { ChatItem } from '../types';

// Props 定义
const props = defineProps<{
  messageList: ChatItem[];
}>();

// 事件定义
const emits = defineEmits<{
  (e: 'buttonClick', message: string): void;
  (e: 'click'): void;
}>();

// 处理列表点击
const handleClick = () => {
  emits('click');
};

// 处理按钮点击
const handleButtonClick = (message: string) => {
  emits('buttonClick', message);
  
  // 特殊处理预约时间选择按钮
  if (message.includes('您希望的上门时间是')) {
    // 触发全局事件
    window.dispatchEvent(new Event('showDatetimePicker'));
  }
};

// 处理图片点击预览
const handleImageClick = (item: ChatItem) => {
  if (!item.img) return;
  
  showImagePreview({
    show: true,
    images: [{ src: item.img }],
    onClose: () => console.log('imagepreview closed')
  });
};

// 计算消息项样式类
const getItemClass = (id: number) => {
  if (id === 1) return 'pop__chat-msg-me';
  if (id === 2) return 'pop__chat-msg-me2';
  return '';
};

// 滚动到底部方法
const scrollToBottom = () => {
  nextTick(() => {
    const container = document.getElementById('message-container');
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  });
};

// 监听消息列表变化
watch(
  () => props.messageList,
  () => {
    scrollToBottom();
  },
  { deep: true }
);

// 方法暴露
defineExpose({
  scrollToBottom
});
</script>

<style lang="scss" scoped>
$bg-color: #f7f8fa;
$primary-color: #4cb4e7;
$secondary-color: #4cb4e7;
$text-color: #333;
$border-radius: 4px;
$avatar-size: 40px;

.content {
  background: $bg-color;
  padding: 0.2rem;
  overflow: scroll;
  height: 73vh;
  box-sizing: border-box;
}

.message-list {
  padding-bottom: 2rem;
  
  &::after {
    content: '';
    clear: both;
    display: block;
  }
}

// 消息样式
.pop__chat-msg-me, .pop__chat-msg-me2 {
  display: flex;
  margin-bottom: 16px;
  width: max-content;
}

.pop__chat-msg-me {
  justify-content: flex-end;
}

.message-content, .message-content-user {
  display: flex;
}

.message-content {
  width: 280px;
  justify-content: flex-end;
}

.message-content-user {
  width: 220px;
}

.message-bubble {
  background-color: $secondary-color;
  color: #fff;
  float: right;
  border-style: solid;
  border-width: 1px;
  border-radius: $border-radius;
  font-size: 14px;
  margin: 0 8px;
  padding: 12px 10px;
  position: relative;
  max-width: 220px;

  &::before {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 0 0;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 12px;
    background: inherit;
    border-color: inherit;
    right: -5px;
    transform: translate(0, -50%) rotate(45deg);
  }
}

.message-bubble-user {
  background-color: #fff;
  color: $text-color;
  float: left;
  border-style: solid;
  border-width: 1px;
  border-radius: $border-radius;
  font-size: 14px;
  margin: 0 8px;
  padding: 12px 10px;
  position: relative;
  max-width: 220px;

  &::before {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 0 0;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 12px;
    background: inherit;
    border-color: inherit;
    left: -5px;
    transform: translate(0, -50%) rotate(45deg);
  }
}

.message-image, .message-image-user {
  border-radius: $border-radius;
  float: left;
  margin: 0 8px;
  position: relative;
}

.message-image {
  max-width: 120px;
}

.message-image-user {
  max-width: 80px;
}

.message-avatar {
  display: block;
  overflow: hidden;
  height: $avatar-size;
  width: $avatar-size;
  border-radius: 50%;
}

// 按钮和输入样式
.button-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.action-button {
  width: 90px;
  height: 32px;
  margin: 10px 15px 0px 15px;
  background-color: #fff;
  border: 1px solid $primary-color;
  border-radius: 4px;
  cursor: pointer;
  color: $primary-color;
  
  &.large {
    width: 150px;
    height: 36px;
  }
  
  &:hover {
    background-color: rgba($primary-color, 0.1);
  }
}

.video-container {
  width: 100%;
  padding: 30px 0;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: $border-radius;
  margin-top: 10px;
}

.link-container {
  width: 100%;
  margin-top: 10px;
}

.link-card {
  background-color: #f0f0f0;
  padding: 12px;
  border-radius: $border-radius;
  
  h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: $primary-color;
  }
  
  p {
    margin: 0;
    font-size: 12px;
    color: #666;
  }
}
</style> 